<template>
  <div class="login">
    <van-nav-bar
  title="会员登录"
  left-arrow
  @click-left="onClickLeft"/>

  <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>

      <div class="form">
        <div class="form-item">
          <input class="inp" maxlength="11" placeholder="请输入手机号码" type="text" v-model="phone">
        </div>
        <div class="form-item">
          <input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text" v-model="codePic">
          <img :src="picUrl" alt="" v-if="picUrl" @click="imgBase64">
        </div>
        <div class="form-item">
          <input class="inp" placeholder="请输入短信验证码" type="text" v-model="codeIfo">
          <button @click="getInfoCode">{{second===totalSecond?'获取验证码':`${this.second}秒重新发送`}}</button>
        </div>
      </div>

      <div class="login-btn" @click="login">登录</div>
    </div>
  </div>
</template>

<script>
// 导入请求相关的接口
import { getPicCode, getSmsCode, sendLogin } from '@/api/login'
import { Toast } from 'vant'
// import { mapState } from 'vuex'
export default {
  // 导入请求相关的接口
  name: 'LoginView',
  data () {
    return {
      picUrl: '',
      codePic: '', // 用户输入的图形验证码
      PicKey: '', // 图形验证码的唯一标识
      codeIfo: '', // 用户输入的短信验证码
      md5: '',
      phone: '', // 用户输入的手机号
      totalSecond: 60, // 定时器倒计时
      second: 60, // 定时器当前秒数
      timer: null // 定时器id
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/')
    },
    async imgBase64 () {
      const { data } = await getPicCode()
      this.PicKey = data.data.key
      this.md5 = data.data.md5
      // 进行渲染图形验证码在页面
      this.picUrl = data.data.base64
    },
    // 发送验证码
    async getInfoCode () {
      // 1.进行判断是否输入手机号
      const re = /^[1][3,4,5,7,8][0-9]{9}$/
      if (this.phone === '' || !re.test(this.phone)) return Toast('请输入正确的手机')
      // 进行判断图形的验证码是否输入正确
      if (this.codePic === '' || !/^[A-Za-z0-9]{4}$/.test(this.codePic)) return Toast('请输入正确的图形验证码')
      // 2.进行发送验证码
      const res = await getSmsCode(this.codePic, this.PicKey, this.phone)
      Toast('验证码发送成功!')
      console.log(res)
      // 开启一个定时器
      this.timer = setInterval(async () => {
        this.second--
        console.log('正在倒计时' + this.second)
        if (this.second <= 1) {
          clearInterval(this.timer)
          this.second = 60
          this.timer = null
        }
      }, 1000)
      console.log(this.phone)
    },
    // 登录
    async login () {
      // 1.进行验证短信验证码格式是否正确
      if (this.codeIfo === '' || !/^[0-9]{6}$/.test(this.codeIfo)) return Toast('请输入正确的短信验证码')
      // 发送登录请求
      const { data: { data: { token, userId } } } = await sendLogin(this.phone, this.codeIfo)
      // 进行存储登录的token和用户身份标识
      this.$store.commit('user/setUserInfo', { token, userId })
      Toast('登录成功!')
      // 2.进行登录
      this.$router.push('layout/home')
    }
  },
  computed: {
  },
  created () {
    this.imgBase64()
  },
  // 生命周期组件销毁
  destroyed () {
    // 退出登录进行清空定时器
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 49px 29px;

.title {
  margin-bottom: 20px;
  h3 {
    font-size: 26px;
    font-weight: normal;
  }
  p {
    line-height: 40px;
    font-size: 14px;
    color: #b8b8b8;
  }
}

.form-item {
  border-bottom: 1px solid #f3f1f2;
  padding: 8px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  .inp {
    display: block;
    border: none;
    outline: none;
    height: 32px;
    font-size: 14px;
    flex: 1;
  }
  img {
    width: 94px;
    height: 31px;
  }
  button {
    height: 31px;
    border: none;
    font-size: 13px;
    color: #cea26a;
    background-color: transparent;
    padding-right: 9px;
  }
}

.login-btn {
  width: 100%;
  height: 42px;
  margin-top: 39px;
  background: linear-gradient(90deg,#ecb53c,#ff9211);
  color: #fff;
  border-radius: 39px;
  box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
}
</style>
